<template>
  <view class="bg-1 more-filter">
    <view class="flex-1" style="overflow: hidden;">
      <scroll-view scrollY="true" class="h">
        <view class="p-l24 p-r4">
          <view class="p-v30 tag-section">
            <view class="tag-title">
              <text class="text-700-130">更新日期</text>
            </view>
            <view class="tag-list">
              <view
                v-for="(tag, index) in updateDateList"
                :key="index"
                class="p-v20 m-t20 m-r20 flex-c tag"
                :class="[{ active: tag === selected.updateDate }]"
                @click="selectUpdateDate(tag)">
                <text>{{ tag }}</text>
              </view>
            </view>
          </view>

          <view class="p-v30 tag-section">
            <view class="tag-title">
              <text class="text-700-130">工作经验</text>
            </view>
            <view class="tag-list">
              <view
                v-for="(tag, index) in workExpList"
                :key="index"
                class="p-v20 m-t20 m-r20 flex-c tag"
                :class="[{ active: tag === selected.workExp }]"
                @click="selectWorkExp(tag)">
                <text>{{ tag }}</text>
              </view>
            </view>
          </view>

          <view class="p-v30 tag-section">
            <view class="tag-title">
              <text class="text-700-130">最低学历</text>
            </view>
            <view class="tag-list">
              <view
                v-for="(tag, index) in eduList"
                :key="index"
                class="p-v20 m-t20 m-r20 flex-c tag"
                :class="[{ active: tag === selected.edu }]"
                @click="selectEdu(tag)">
                <text>{{ tag }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="bottom p-h24 flex-c">
      <view class="flex-c r-40 reset-btn">
        <text class="text-700-528">清空条件</text>
      </view>
      <view class="flex-c flex-1 r-40 m-l24 confirm-btn">
        <text class="text-700-228">确定</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'

  const updateDateList = ref(['不限时间', '3天内', '7天内', '15天内', '30天内'])
  const workExpList = ref(['全部', '在校生', '应届生', '一年以内', '1-3年', '3-5年', '5-10年', '10年以上'])
  const eduList = ref(['不限', '初中', '高中', '大专', '本科', '其他'])

  const selected = reactive({
    updateDate: '',
    workExp: '',
    edu: '',
  })

  const selectUpdateDate = (val: string) => {
    if (selected.updateDate === val) return

    selected.updateDate = val
  }

  const selectWorkExp = (val: string) => {
    if (selected.workExp === val) return

    selected.workExp = val
  }

  const selectEdu = (val: string) => {
    if (selected.edu === val) return

    selected.edu = val
  }
</script>

<style lang="scss" scoped>
	.more-filter {
		height: 790rpx;
		display: flex;
		flex-direction: column;
	}
	.tag-list {
		display: flex;
		flex-wrap: wrap;
	}
	.tag {
		height: 72rpx;
		padding: 0 20rpx;
		border-radius: 4rpx;
		font-size: 28rpx;
		color: $text-color-1;
		background-color: $bg-color-6;
		border: 1px solid transparent;
		&.active {
			font-weight: bold;
			color: $text-color-5;
			background-color: $bg-color-4;
			border-color: $border-color-1;
		}
	}

	.tag-section + .tag-section {
		position: relative;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			right: 20rpx;
			top: 0;
			height: 1px;
			background-color: $border-color-2;
			transform-origin: top;
			transform: scaleY(0.5);
		}
	}

	.bottom {
		height: 120rpx;
	}

	.reset-btn,
	.confirm-btn {
		height: 80rpx;
	}

	.reset-btn {
		width: 240rpx;
		background-color: $bg-color-4;
	}
	.confirm-btn {
		background-color: $bg-color-2;
	}
</style>
